<template>
  <div ref="main" class="main" id="main"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { SVG } from "@svgdotjs/svg.js";
import drawUtil from "./drawUtil";

const main = ref("main");

onMounted(() => {
  let draw = SVG();
  draw
    .addTo(main.value)
    .size("100%", "100%")
    .attr({ color: "red" })
    .css({ border: "1px solid grey" });
  const D = new drawUtil(draw);

  // 绘制矩形
  D.drawRect();

  // 线条
  D.addLine();

  //绘制箭头
  D.drawArrow("red");

  // 添加标记
  D.addMarker1();

  // 添加标记
  D.addMarker2();

  //链接
  D.addLink();

  // 分组
  D.addGroup();

  // 引用
  D.addSymbol();

  // 文字
  D.addText();

  // 文字路径
  D.addTextPath();

  D.addTextBuild();

  // 图片
  D.addImg();

  let nested = draw.nested().move(100, 400);
  const circle1 = nested
    .circle(50)
    .center(25, 25)
    .addClass("cvat_canvas_issue_region")
    .attr({
      fill: "red",
      stroke: "#fff",
      "stroke-width": `2`,
      id: `100`,
    });
  const text1 = nested
    .text("2").font({ fill: "#fff", family: "Inconsolata" })
    .move(22,18);

  //创建html标签
  var element = draw.element("div").words("This is a title.");

  // 圆
  var circle2 = draw.circle(0).radius(10).move(200, 180);
});
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
}
</style>
